<template>
  <div class="memberStyle">
    <el-dialog title="添加报名者" :visible.sync="isShow" @close="handleColse">
      <el-scrollbar class="import_table" wrap-class="vacade-scroll" v-if="!isLoad">
        <el-form ref="form" v-bind="getFormProps({labelWidth: '100px'})">
          <el-form-item label="姓名：" prop="commingName" :rules="[
              { required: true,  message: '请输入姓名'},
              Object.assign({}, validator.rule.userName, {trigger:'blur'})
            ]">
            <el-input :maxlength="10" v-model.trim="form.commingName" placeholder="请填写真实姓名" v-focus></el-input>
          </el-form-item>
          <el-form-item label="性别："
            prop="sex"
            :rules="{ required: true, message: '请选择性别'}">
            <el-radio-group v-model="form.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="证件号码："
            prop="idNo"
            :rules="[
              { required: true, message: '请输入证件号'},
              Object.assign({}, validator.rule.idNo, {trigger:'blur'})
            ]">
            <el-input class="form-ctrl" v-model.trim="form.idNo" :maxlength="30" placeholder="请输入有效证件号">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号码："
            prop="linkPhone"
            :rules="[
              { required: true,  message: '请输入手机号码'},
              Object.assign({}, validator.rule.mobile, {trigger:'blur'})
              ]">
            <el-input class="form-ctrl" v-model.trim="form.linkPhone" :maxlength="11" placeholder="请输入有效手机号"></el-input>
          </el-form-item>
          <el-form-item label="出生日期："
            prop="birthday"
            :rules="{ required: true,  message: '请选择出生日期'}">
            <el-date-picker
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item
            v-for="(item, index) in form.extFields" :key="item.fieldText"
            :label="item.fieldText"
            :prop="`${'extFields'}.${index}.value`"
            :rules="[
              { required: item.isRequired,  message: `请${item.showModel==1?'选择':'输入'}${item.fieldText}`},
              checkCode
              ]">
              <el-select
                class="normal-input"
                v-if="item.showModel==1"
                v-model.trim="item.value"
                :placeholder="`请选择${item.fieldText}`"
                @change="value => item.valueText = value">
                <el-option v-for="item in item.listData" :key="item.value" :label="item.text" :value="item.text" />
              </el-select>
              <el-input
                v-else
                class="normal-input"
                v-model.trim="item.value"
                :maxlength="item.maxlength"
                :placeholder="`请输入${item.fieldText}`"
                @change="value => item.valueText = value">
              </el-input>
          </el-form-item>
          <div class="button-box">
            <el-button type="primary" native-type="submit" :loading="loading">{{isEdit ? '确认编辑' : '确认添加'}}</el-button>
          </div>
        </el-form>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import validator from 'utils/validator'
import {cloneObj} from 'utils'
import { mapGetters } from 'vuex'
import api from 'api/race'
export default {
  mixins: [form],
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    memberInfo: {
      type: Object
    },
    matchtypeStyle: {
      type: Number
    },
    ageInfo: {
      type: Object
    },
    groupType: {
      type: [String, Number]
    }
  },
  computed: {
    ...mapGetters({
      isLoad: 'loading'
    })
  },
  data () {
    let self = this
    var checkStr = (rule, value, callback) => {
      if (!/^[\u4e00-\u9fa5a-zA-Z0-9@]*$/.test(value)) {
        callback(new Error('只能输入中英文、数字、@符号'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      checkCode: { validator: checkStr, trigger: 'blur' },
      validator,
      isEdit: false,
      form: {
        playNumber: '',
        roundType: '',
        groupTeamName: '',
        isCaptain: 0,
        commingName: '',
        sex: 1,
        idNo: '',
        linkPhone: '',
        birthday: '',
        extFields: []
      },
      extFields: [],
      minAge: 7,
      maxAge: 50,
      pickerOptions: {
        disabledDate (time) {
          return Date.now() - 8.64e7 * 366 * (Number(self.minAge) || 7) < time.getTime() ||
          time.getTime() < Date.now() - 8.64e7 * 366 * (Number(self.maxAge) || 50)
        }
      },
      matchStyle: [20011, 20001, 20003, 20005, 20007, 20009, 20014] // 跑步，足球，篮球，羽毛球，网球，乒乓球，其他个人赛
    }
  },
  mounted () {
    this.minAge = Number(this.ageInfo.minAge)
    this.maxAge = this.ageInfo.minAge === this.ageInfo.maxAge
      ? Number(this.ageInfo.maxAge) + 1
      : Number(this.ageInfo.maxAge)
    if (this.memberInfo.sex && this.memberInfo.sex !== 3) {
      this.isEdit = true
      this.form.playNumber = this.memberInfo.playNumber
      this.form.roundType = this.memberInfo.roundType
      this.form.groupTeamName = this.memberInfo.groupTeamName
      this.form.isCaptain = this.memberInfo.isCaptain
      this.form.commingName = this.memberInfo.commingName
      this.form.sex = this.memberInfo.sex === 3 ? 1 : this.memberInfo.sex
      this.form.idNo = this.memberInfo.idNo
      this.form.linkPhone = this.memberInfo.linkPhone
      this.form.birthday = this.memberInfo.birthday
      this.form.extFields = this.memberInfo.extFields
    } else {
      this.form.groupTeamName = this.memberInfo.groupTeamName
      this.form.playNumber = this.memberInfo.playNumber
      this.form.roundType = this.memberInfo.roundType
      this.getFields()
    }
  },
  methods: {
    handleColse () {
      this.$emit('input', false)
    },
    getFields () { // 获取自定义报名项
      api.dynamicGetMatchList({matchId: this.$route.query.matchId}).then((res) => {
        if (res.data) {
          res.data.forEach(item => {
            item.isRequired = 1
            item.showModel = item.fieldType === 1 ? 2 : 1
            item.valueText = ''
            item.value = ''
            if (item.fieldType === 2) {
              item.dataType = 3
              item.selectedValue = 0
              item.listData = JSON.parse(item.fieldValues)
              if (item.listData.length) {
                item.listData.forEach((op, index) => {
                  op.value = index
                })
              }
            } else {
              item.maxlength = 50
            }
          })
          this.extFields = cloneObj(res.data)
          this.form.extFields = cloneObj(res.data)
        }
      })
    },
    submit () {
      let formList = cloneObj(this.form)
      if (!formList.playNumber) {
        delete formList.playNumber
      }
      delete formList.roundType
      delete formList.groupTeamName
      delete formList.isCaptain
      let matchSignFieldReqs = formList.extFields.map(item => {
        return {
          fieldText: item.fieldText,
          fieldValue: item.valueText
        }
      })
      let birthdayDate = formList.birthday
      delete formList.extFields
      delete formList.birthday
      let listMatchSignDataReq = [Object.assign({matchSignFieldReqs: matchSignFieldReqs, birthday: new Date(birthdayDate).getTime()}, formList)]
      let matchListData = Object.assign({matchId: this.$route.query.id, listMatchSignDataReq: listMatchSignDataReq, groupType: this.groupType})
      let matchData = Object.assign({matchId: this.$route.query.id, matchParticipantReq: matchListData, captainIndex: ''})
      if (this.matchStyle.includes(this.matchtypeStyle)) {
        api.saveMultiMember(matchData, {context: this, successMsg: '添加成功'}).then(res => {
          this.$emit('success').$emit('input', false)
          // this.$router.push({path: '/race/detail/player', query: {id: this.$route.query.id, matchId: this.$route.query.id, matchtype: this.$route.query.matchtype, cost: this.$route.query.cost, tasktype: this.$route.query.tasktype, isRun: this.$route.query.isRun}})
        })
      } else {
        api.saveMatchMember(matchData, {context: this, successMsg: 'none'}).then(res => {
          this.$emit('success', this.form)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.memberStyle {
  .el-dialog--small {
    width: 600px;
  }
  .el-form-item__content > .el-input, .el-form-item__content > .el-cascader, .el-form-item__content > .el-select {
    width: 95%;
  }
  .vacade-scroll{
    max-height:400px;
    overflow-y: scroll;
  }
}
</style>
